<template>
  <!-- 组内 可编辑 上下午合并 =》改版-->
  <el-container class="app-container">
    <el-card class="box-card">
      <div class="app-main">
        <!-- <el-alert
          v-if="userGroup.isLeader||userGroup.role=='Administrator'"
          show-icon
          center
          title="点击保存排班，提交后方可保存排班信息"
          type="warning"
        ></el-alert>-->

        <div class="top-button-group">
          <upload-excel-component
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            ref="excelRef"
          />
          <el-button
            v-if="userGroup.isLeader || userGroup.role == 'Administrator'"
            size="medium"
            :loading="loading"
            type="success"
            icon="el-icon-upload2"
            @click="importLastWeek"
          >导入上周排班</el-button
          >
          <el-button-group>
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-arrow-left"
              @click="getLastWeek"
            ></el-button>
            <el-button size="medium" type="primary" @click="getNextWeek">
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </el-button-group>
          <el-button
            size="medium"
            :disabled="ifNow"
            type="primary"
            @click="init"
          >本周</el-button
          >
          <el-button
            type="warning"
            size="medium"
            class="m0"
            icon="el-icon-download"
            @click="clickDownloadTemplate"
          >下载模板</el-button
          >
        </div>

        <div v-loading="loading" id="tbBox" ref="printContent4">
          <div class="top-table-title">
            <el-select
              v-if="userGroup.role == 'Administrator'"
              size="small"
              v-model="group"
              @change="changeGroup"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in groupOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <span v-else>{{userGroup.groupName}}</span>
            <span>{{showDateTitle}}</span>
            <!-- <span>({{weekDate[0]+' - '+weekDate[6]}})</span> -->

            <span>审核排班表</span>
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content" class="tableTrips" v-html="tips"></div>
              <el-button style="color:#666; border:none;padding:0 5px">
                班别说明
                <i class="el-icon-info el-icon--right"></i>
              </el-button>
            </el-tooltip>
          </div>
          <div>
            <table class="table-time">
              <tr>
                <th>星期</th>
                <th v-for="(colItem, colIndex) in columnName" :key="colIndex">
                  {{colItem}}
                </th>
              </tr>
            </table>
          </div>
          <div>
            <table class="table-title">
              <tr>
                <th>日期</th>
                <th v-for="(colItem, colIndex) in weekDate" :key="colIndex">
                  {{colItem}}
                </th>
              </tr>
            </table>
          </div>
          <div class="scrollbar rankService">
            <table class="table" style="table-layout: fixed;">
              <tr v-for="(item, index) in tableData" :key="index">
                <td :class="{ 'support-line': !!item.support }">
                  <span>{{item.support ? "支援(" + item.userName + ")" : item.userName}}</span>
                  <el-tooltip
                    v-if="
                      (userGroup.isLeader ||
                        userGroup.role == 'Administrator') &&
                        item.support
                    "
                    class="item"
                    effect="dark"
                    content="移除该支援医生"
                    placement="top"
                  >
                    <i
                      @click.stop="handleRemoveSupport(index)"
                      class="el-icon-close close-icon"
                    ></i>
                  </el-tooltip>
                  <!-- <i  @click.stop="handleRemoveSupport(index)" class="el-icon-close close-icon"></i> -->
                </td>
                <td v-for="(colItem, colIndex) in item.items" :key="colIndex">
                  <div style="position:relative;">
                    <el-popover
                      v-if="
                        (userGroup.isLeader ||
                          userGroup.role == 'Administrator') &&
                          new Date().getTime() <
                          Date.parse(
                            new Date(`${weekDate[colIndex]} 24:00:00`)
                          )
                      "
                      placement="top"
                      trigger="click"
                      width="260"
                      v-model="colItem.visible"
                    >
                      <span class="box-con-tit">班别选择</span>
                      <div class="box-con">
                        <el-checkbox
                          v-model="citem.isChecked"
                          v-for="citem in allList1"
                          :key="citem.id"
                        >
                          <span class="aaa">
                            <span>{{citem.shiftName}}</span>
                            <span class="dtip" v-if="citem.shiftType == 1">
                              {{"(" +
                                (citem.isPreDay ? "(昨日)" : "") +
                                citem.startTime +
                                "~" +
                                citem.endTime +
                                (citem.isNextDay ? "(次日))" : ")")}}
                            </span>
                          </span>
                        </el-checkbox>
                      </div>
                      <div style="text-align: center; margin: 10px 0 0">
                        <el-button-group style="width:100%;">
                          <el-button
                            size="mini"
                            type="default"
                            style="padding:4px;"
                            @click="cancelSelect(index, colIndex, colItem)"
                          >取消</el-button
                          >
                          <el-button
                            type="primary"
                            style="padding:4px;"
                            size="mini"
                            @click="hSureEdit(index, colIndex, colItem)"
                          >确定</el-button
                          >
                        </el-button-group>
                      </div>
                      <span
                        slot="reference"
                        class="cursor"
                        @click="selectPop(index, colIndex, colItem)"
                      >
                        <i
                          v-if="!getTxt(colItem.detail, item.support)"
                          class="el-icon-circle-plus-outline add-icon"
                        ></i>
                        <template v-else>
                          <el-tooltip placement="bottom">
                            <div slot="content">
                              <div
                                v-for="ditem in colItem.detail"
                                :key="ditem.shiftName"
                              >
                                {{ditem.shiftName +
                                  (ditem.isPreDay ? "(昨日)" : "") +
                                  "：" +
                                  ditem.startTime +
                                  "~" +
                                  ditem.endTime +
                                  (ditem.isNextDay ? "(次日)" : "")}}
                              </div>
                            </div>
                            <span
                              class="cursor"
                              v-html="getTxt(colItem.detail, item.support)"
                            ></span>
                          </el-tooltip>
                          <i
                            style="color:#72bde6;cursor:pointer"
                            class="el-icon-arrow-down"
                          ></i>
                          <i
                            @click.stop="
                              handleRemove2(index, colIndex, colItem)
                            "
                            class="el-icon-close close-icon"
                          ></i>
                        </template>
                      </span>
                    </el-popover>
                    <el-tooltip v-else placement="bottom">
                      <div slot="content">
                        <div
                          v-for="ditem in colItem.detail"
                          :key="ditem.shiftName"
                        >
                          {{(ditem.isPreDay ? "(昨日)" : "") +
                            ditem.shiftName +
                            "：" +
                            ditem.startTime +
                            "~" +
                            ditem.endTime +
                            (ditem.isNextDay ? "(次日)" : "")}}
                        </div>
                      </div>
                      <span
                        class
                        v-html="getTxt(colItem.detail, item.support)"
                      ></span>
                    </el-tooltip>
                  </div>
                </td>
              </tr>
              <!-- 责任医师 -->
              <tr>
                <td>责任医师</td>
                <td v-for="(cItem, cIndex) in weekChargeDoctor" :key="cIndex">
                  <div style="position:relative;">
                    <el-select
                      v-if="
                        (userGroup.isLeader ||
                          userGroup.role == 'Administrator') &&
                          new Date().getTime() <
                          Date.parse(new Date(`${weekDate[cIndex]} 24:00:00`))
                      "
                      clearable
                      size="mini"
                      v-model="cItem.userId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in groupUserList"
                        :key="item.id"
                        :label="item.userName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <span v-else>{{cItem.userName}}</span>
                  </div>
                </td>
              </tr>
              <!-- 读片 -->
              <tr class="msg">
                <td class="tit">读片</td>
                <td colspan="7" style="text-align:left;padding:0 10px;">
                  <span>
                    本周读片
                    <span v-if="!selectShow">
                      <span style="color:red;">{{readDoc.userName || "无"}}</span>
                      <el-button
                        v-if="
                          userGroup.isLeader ||
                            userGroup.role == 'Administrator'
                        "
                        type="text"
                        icon="el-icon-edit"
                        @click="selectShow = true"
                      >{{!readDocId ? "请选择" : ""}}</el-button
                      >
                    </span>
                    <span v-if="selectShow">
                      <el-select
                        size="mini"
                        v-model="readDocId"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in readList"
                          :key="item.userId"
                          :label="item.userName"
                          :value="item.userId"
                        ></el-option>
                      </el-select>
                      <el-button
                        :disabled="!readDocId"
                        type="primary"
                        style="padding:4px;"
                        size="mini"
                        @click="submitRead"
                      >确定</el-button
                      >
                      <el-button
                        style="padding:4px; margin-left:4px;"
                        size="mini"
                        @click="cancelSet"
                      >取消</el-button
                      >
                      <!--
                      <el-popover placement="top" width="220" trigger="click">
                        <span class="box-con-tit">本周读片人员选择</span>
                        <div class="box-con">
                          <el-radio-group v-model="readDocId">
                            <el-radio
                              v-for="item of readList"
                              :key="item.userId"
                              :label="item.userId"
                            >{{item.userName}}</el-radio>
                          </el-radio-group>
                        </div>
                        <div style="text-align: center; margin: 10px 0 0">
                          <el-button-group style="width:100%;">
                            <el-button size="mini" type="default" style="padding:4px;">取消</el-button>
                            <el-button type="primary" style="padding:4px;" size="mini">确定</el-button>
                          </el-button-group>
                        </div>
                        <span slot="reference" class="cursor">
                          <el-button slot="reference" type="text" icon="el-icon-edit">请选择</el-button>
                        </span>
                      </el-popover>-->
                    </span>
                    （读片顺序：{{readStr || "无"}}）
                  </span>
                </td>
              </tr>
              <!-- 质控 -->
              <tr class="msg">
                <td class="tit">质控</td>
                <td colspan="7" style="text-align:left;padding:0 10px;">
                  质控顺序：{{quaStr || "无"}}
                </td>
              </tr>
              <!-- 备注 -->
              <tr class="msg">
                <td class="tit">备注</td>
                <td colspan="7" style="text-align:left;padding:0 10px;">
                  <span v-for="item in allList" :key="item.id">
                    {{item.shiftName +
                      "(" +
                      (item.isPreDay ? "昨日" : "") +
                      item.startTime +
                      "~" +
                      (item.isNextDay ? "次日" : "") +
                      item.endTime +
                      "); "}}
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div
          class="btn-footer"
          v-if="userGroup.isLeader || userGroup.role == 'Administrator'"
        >
          <el-button
            class="add-doc"
            size
            icon="el-icon-plus"
            type="text"
            @click="addDoc"
          >添加支援</el-button
          >
          <el-button
            :loading="loading"
            type="warning"
            icon="el-icon-printer"
            @click="handleDownload"
          >预览打印</el-button
          >
          <el-button
            :loading="loading || downloadLoading"
            type="warning"
            icon="el-icon-download"
            @click="toExcel"
          >导出</el-button
          >
          <el-button
            :loading="loading || downloadLoading"
            @click="saveSchedule"
            icon="el-icon-check"
            type="primary"
          >保存排班</el-button
          >
          <!-- <el-button @click="cancel">撤销</el-button> -->
          <span
            class="tip"
            v-if="userGroup.isLeader || userGroup.role == 'Administrator'"
          >
            <i class="el-icon-warning"></i> 点击保存排班，提交后方可保存排班信息
          </span>
        </div>
      </div>
    </el-card>
    <setPop :visible.sync="setShow" :users="groupUserList"></setPop>
    <supportChoice
      :visible.sync="supportShow"
      :gid="group"
      :sarr="sarr"
      :tit="showDateTitle"
      :groups="groupOptions"
      @confirmEdit="confirmAdd"
    ></supportChoice>
    <!--排班导入弹窗-->
    <el-dialog
      title="排班导入"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      width="80%"
      class="dialog-box"
    >
      <el-card class="box-card" style="padding: 15px">
        <el-table
          :data="excelTableData"
          border
          highlight-current-row
          :header-cell-style="tableStyle.headerCellStyle"
          :cell-style="tableStyle.cellRowStyle"
          height="350px"
          style="width: 100%;"
          class="box-table"
        >
          <el-table-column
            v-for="item of excelTableHeader"
            :key="item"
            :prop="item"
            :label="item"
          />
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="dialogOk"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--排班导入失败原因弹窗-->
    <el-dialog
      title="排班导入失败原因"
      :visible.sync="failDialogVisible"
      :destroy-on-close="true"
      width="80%"
      class="dialog-box"
    >
      <el-card style="padding: 0 15px 15px" v-if="failVisible1">
        <h3>排班可替换列表</h3>
        <el-table
          :data="excelTableFailData1"
          border
          highlight-current-row
          :header-cell-style="tableStyle.headerCellStyle"
          :cell-style="tableStyle.cellRowStyle"
          style="width: 100%;"
          class="box-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center">
          </el-table-column>
          <template v-for="(item, index) in excelTableFailHeader">
            <el-table-column
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width"
              show-overflow-tooltip
            />
          </template>
        </el-table>
        <span class="dialog-footer dialog-footer-flex">
          <div class="failNum">{{failNum1}}</div>
          <el-button
            type="primary"
            :loading="loading"
            @click="dialogReplaceOk"
          >替 换</el-button
          >
        </span>
      </el-card>
      <el-card style="padding: 0 15px 15px" v-if="failVisible2">
        <h3>排班不可替换列表</h3>
        <el-table
          :data="excelTableFailData2"
          border
          highlight-current-row
          :header-cell-style="tableStyle.headerCellStyle"
          :cell-style="tableStyle.cellRowStyle"
          style="width: 100%;"
          class="box-table"
          @selection-change="handleSelectionChange"
        >
          <template v-for="(item, index) in excelTableFailHeader">
            <el-table-column
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width"
              show-overflow-tooltip
            />
          </template>
        </el-table>
        <span class="dialog-footer dialog-footer-flex">
          <div class="failNum">{{failNum2}}</div>
          <el-button @click="failDialogVisible = false">关 闭</el-button>
        </span>
      </el-card>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getUserListAll,
  getBatchInsertDuties,
  getBatchUpdateDuties
} from '@/api/api-rostering.js'
import publicMethod from '@/utils/publicMethod'
import store from '@/store'
import setPop from './component/specialSet'
import supportChoice from './component/supportChoice'
import uploadExcelComponent from './component/UploadExcel'
import tableStyle from '@/utils/tableStyle.js'
export default {
  name: 'IntragroupNew',
  components: {
    setPop,
    supportChoice,
    uploadExcelComponent
  },
  extends: publicMethod,
  data() {
    return {
      allList1: [],
      usersAll: [],
      setShow: false,
      supportShow: false,
      sarr: [],
      dialogVisible: false,
      tableStyle: tableStyle,
      excelTableData: [],
      excelTableHeader: [],
      excelTableDataObj: {},
      failDialogVisible: false,
      failVisible1: false,
      failVisible2: false,
      excelTableFailData1: [],
      excelTableFailData2: [],
      excelTableFailHeader: [
        {
          prop: 'date',
          label: '日期',
          width: 140
        },
        {
          prop: 'doctorName',
          label: '医生姓名',
          width: 140
        },
        {
          prop: 'shift',
          label: '排班名称',
          width: 200
        },
        {
          prop: 'message',
          label: '失败原因',
          width: 300
        }
      ],
      failNum1: 0,
      failNum2: 0,
      multipleSelection: []
    }
  },
  mounted() {},
  created() {
    this.getFirstDayOfWeek(new Date())
    this.getUserListAll()
    // this.timeState = Date.parse(new Date('2020-09-21 24:00:00'))
    // this.userGroup = store.getters.userInfo
    this.init()
    this.getQueryWorkshifts()
  },
  methods: {
    // 排班导入
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    // 数字转换成日期
    formatDate(timeValue) {
      let time = new Date((timeValue - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      let year = time.getFullYear() + ''
      let month = time.getMonth() + 1 + ''
      let date = time.getDate() + ''
      if (this.leapyear(year)) {
        // 如果是闰年
        date = time.getDate() - 1 + ''
      }
      return (
        year +
        '/' +
        (month < 10 ? '0' + month : month) +
        '/' +
        (date < 10 ? '0' + date : date)
      )
    },
    // 区分闰年与平年
    leapyear(year) {
      var flag = false
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        flag = true
      }
      return flag
    },
    // 排班导入成功
    handleSuccess({ results, header }) {
      results.forEach(item => {
        const week = Object.keys(item)
        for (let i = 0; i < week.length; i++) {
          if (this.formatDate(item[week[i]]) !== 'NaN/NaN/NaN') {
            item[week[i]] = this.formatDate(item[week[i]])
          }
        }
      })
      this.excelTableData = results
      let excelResultData = JSON.parse(
        JSON.stringify(this.$refs.excelRef.excelResultData)
      )
      // 获取日期
      let tableDate = []
      for (let i = 0; i < excelResultData.length; i++) {
        tableDate.push({
          id: i + 1,
          children: []
        })
        for (let j in excelResultData[i][0]) {
          let o = []
          o[j] = excelResultData[i][0][j]
          tableDate[i].children.push({
            date: this.formatDate(o[j])
          })
        }
      }
      // console.log("tableDate=====>", tableDate);
      // 获取用户数据
      let tableData = []
      for (let i = 0; i < excelResultData.length; i++) {
        for (let j = 1; j < excelResultData[i].length; j++) {
          tableData.push({
            id: i + 1,
            doctorname: excelResultData[i][j].星期,
            children: excelResultData[i][j]
          })
        }
      }
      let tableData2 = []
      for (let i = 0; i < tableData.length; i++) {
        tableData2.push({
          id: tableData[i].id,
          children: []
        })
        for (let j in tableData[i].children) {
          let o = []
          o[j] = tableData[i].children[j]
          tableData2[i].children.push({
            shift: o[j],
            doctorname: tableData[i].doctorname
          })
        }
      }
      // console.log("tableData2=====>", tableData2);
      // 合并
      var uploadDutyList = []
      for (let i = 0; i < tableDate.length; i++) {
        for (let j = 0; j < tableData2.length; j++) {
          if (tableDate[i].id === tableData2[j].id) {
            uploadDutyList.push(
              tableDate[i].children.map((item, index) => {
                return { ...item, ...tableData2[j].children[index] }
              })
            )
          }
        }
      }
      uploadDutyList = uploadDutyList.flat()
      for (let i = 0; i < uploadDutyList.length; i++) {
        if (uploadDutyList[i].date === 'NaN/NaN/NaN') {
          delete uploadDutyList[i]
        }
      }
      let userInfo = store.getters.userInfo
      this.excelTableDataObj = {
        userId:
          userInfo.userName === 'admin' ? userInfo.userName : userInfo.userId,
        userName: userInfo.userName,
        uploadDutyList: uploadDutyList.flat()
      }
      // console.log("this.excelTableDataObj=====", this.excelTableDataObj);
      this.excelTableHeader = header
      this.dialogVisible = true
    },
    // 排班导入调用接口
    dialogOk() {
      this.loading = true
      getBatchInsertDuties(this.excelTableDataObj)
        .then(res => {
          if (!res) return
          this.dialogVisible = false
          if (res.result.length === 0) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
            this.excelTableFailData1 = []
            res.result.forEach(item => {
              if (item.updFlag === true) {
                this.excelTableFailData1.push(item)
              } else {
                this.excelTableFailData2.push(item)
              }
            })
            const datalen1 = this.excelTableFailData1.length
            const datalen2 = this.excelTableFailData2.length
            this.failNum1 = '共' + datalen1 + '条'
            this.failNum2 = '共' + datalen2 + '条'
            this.failVisible1 = datalen1 !== 0
            this.failVisible2 = datalen2 !== 0
            this.failDialogVisible = true
            this.loading = false
          }
          this.getQueryGroupDuties()
        })
        .catch(() => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 批量替换
    dialogReplaceOk() {
      const idArr = []
      this.multipleSelection.forEach(item => {
        idArr.push(item.id)
      })
      if (idArr.length === 0) {
        this.$message.warning('请选择需要替换的排班！')
      }
      this.loading = true
      getBatchUpdateDuties(idArr)
        .then(res => {
          if (!res) return
          this.dialogVisible = false
          this.loading = false
          this.getQueryGroupDuties()
        })
        .catch(() => {})
    },
    // 下载模板
    clickDownloadTemplate() {
      // this.$message.warning("下载模板接口还在开发中，当前为排班导入测试模板！");
      let a = document.createElement('a')
      a.href = '../../static/排班导入模板.xlsx'
      a.download = '排班导入模板.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    getUserListAll() {
      getUserListAll().then(res => {
        if (!res) return
        this.usersAll = res.result
      })
    },

    confirmAdd(list) {
      console.log('support-list', list)
      for (let item of list) {
        let i = this.tableData.findIndex(
          titem => titem.userName == item.userName
        )
        if (i < 0) {
          let obj = {
            userName: item.userName,
            items: [],
            support: true
            // sinfo: item
          }
          for (let day of this.weekDate) {
            obj.items.push({
              date: day,
              detail: [],
              visible: false
            })
          }
          this.tableData.push(obj)
        }
      }
      this.$nextTick(() => {
        var element = document.querySelector('#tbBox')
        element.scrollIntoView(false)
        // element.scrollIntoView({ behavior: "instant", block: "end", inline: "nearest" });
      })
    },
    hGetReleaseAll() {
      // this.$api('selectReleaseAllByAccountId', { params: { id: userId } }).then(res => {
      //   if (res && res.data.state == 'success') {
      //     this.allList = res.data.data
      //   }
      // })
    },
    // 确认修改功能
    hSureEdit(index, colIndex, colItem) {
      console.log('aaaa', index, colIndex, colItem)
      let arr = this.allList1.map(function (item) {
        if (item.isChecked === true) {
          return item
        }
      })
      let arr1 = arr.filter(item => {
        return item
      })
      console.warn('222', arr1)
      if (arr1.length < 1) {
        this.tableData[index].items.splice(colIndex, 1, {
          date: colItem.date,
          detail: [],
          visible: false
        })
      } else {
        let gname = ''
        let uid = ''
        let cur = this.tableData[index]
        // if (cur.support) { //支援人
        //   gname = cur.sinfo.groupName
        //   uid = cur.sinfo.id
        // } else {
        let i = this.groupOptions.findIndex(item => item.id == this.group)
        let ii = this.usersAll.findIndex(item => item.userName == cur.userName)
        if (i >= 0) {
          gname = this.groupOptions[i].name
        }
        if (ii >= 0) {
          uid = this.usersAll[ii].id
        }
        // }
        let darr = []
        for (let ditem of arr1) {
          let obj = {
            date: colItem.date,
            userName: cur.userName,
            userId: uid,
            groupId: this.group,
            groupName: gname,
            shiftId: ditem.id,
            endTime: ditem.endTime,
            startTime: ditem.startTime,
            introduction: ditem.introduction,
            isNextDay: ditem.isNextDay,
            isPreDay: ditem.isPreDay,
            shiftName: ditem.shiftName,
            shiftType: ditem.shiftType,
            dep: ditem.dep,
            color: ditem.color
            //     endTime:""
            // id:"d02610af-b0e0-4fe6-b37d-4697aa65dfe6"
            // introduction:null
            // isNextDay:false
            // shiftName:"wq"
            // shiftType:2
            // startTime:""
          }
          darr.push(obj)
        }
        console.warn('sss', arr)
        console.log('darr', darr)
        this.tableData[index].items.splice(colIndex, 1, {
          date: colItem.date,
          detail: [...darr],
          visible: false
        })
      }
      // let params = {
      //     userId : JSON.parse(sessionStorage.getItem('user')).id,
      //     systemIds : this.systemIds
      //   }
      //   this.$api("selectdEdit",{params}).then(res => {
      //   if (res && res.data.success) {
      //       this.$refs.dropdown111.click()
      //       this.$popSuccess(res.data.message)
      //     }else {
      //         this.$popError(res.data.message)
      //       }
      //    })
      //  },
    },
    // 添加责任医生
    // addDutyDoc() {
    //   this.supportShow = true
    //   this.sarr = []
    //   for (let item of this.tableData) {
    //     if (item.support) {
    //       this.sarr.push(item.userName)
    //     }
    //   }
    // },
    // 添加支援医生
    addDoc() {
      this.supportShow = true
      this.sarr = []
      for (let item of this.tableData) {
        if (item.support) {
          this.sarr.push(item.userName)
        }
      }
    },
    setSpecial() {
      this.setShow = true
    },
    // 下载
    handleDownload() {
      let i = this.groupOptions.findIndex(item => item.id == this.group)
      let routeUrl = this.$router.resolve({
        path: '/print',
        query: {
          title: this.groupOptions[i].name + this.showDateTitle,
          type: 'download',
          gid: this.group
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    handleCommand(command, index, colIndex) {
      console.warn('sss', command)
      let i = this.groupOptions.findIndex(item => item.id == this.group)
      let ii = this.usersAll.findIndex(
        item => item.userName == this.tableData[index].userName
      )
      let obj = {
        ...this.tableData[index].items[colIndex],
        ...command,
        ...{
          shiftId: command.id,
          userName: this.tableData[index].userName,
          userId: this.usersAll[ii].id,
          groupId: this.group,
          groupName: this.groupOptions[i].name
        }
      }
      console.warn('sss', obj)
      this.tableData[index].items.splice(colIndex, 1, obj)
    },
    cancelSelect(index, colIndex, colItem) {
      console.warn(index, colIndex, colItem)
      // for (let item of this.allList1) {
      //   item.isChecked = false
      // }
      colItem.visible = false
      this.allList1 = []
      // this.allList1 = JSON.parse(JSON.stringify(this.allList))
    },
    selectPop(index, colIndex, colItem) {
      console.warn(index, colIndex, colItem)
      this.allList1 = JSON.parse(JSON.stringify(this.allList))
      if (colItem.detail.length > 0) {
        for (let citem of colItem.detail) {
          let i = this.allList1.findIndex(aitem => aitem.id == citem.shiftId)
          if (i >= 0) {
            this.allList1[i].isChecked = true
          }
        }
      }
    },
    handleRemoveSupport(index) {
      this.tableData.splice(index, 1)
    },
    handleRemove2(index, colIndex, colItem) {
      console.warn('handleRemove2', index, colIndex, colItem)

      this.tableData[index].items[colIndex].detail = []
    },
    handleRemove(command, index, colIndex) {
      console.warn('sss', command)
      // let i = this.groupOptions.findIndex(item => item.id == this.group)
      // let ii = this.groupUserList.findIndex(item => item.userName == this.tableData[index].userName)
      let obj = {
        ...this.tableData[index].items[colIndex],
        ...command,
        ...{
          endTime: null,
          groupId: null,
          groupName: null,
          id: null,
          introduction: null,
          isNextDay: false,
          isPreDay: false,
          shiftId: null,
          shiftName: null,
          shiftType: null,
          startTime: null,
          userId: null,
          userName: null
        }
      }
      console.warn('sss', obj)
      this.tableData[index].items.splice(colIndex, 1, obj)
    },
    handleSelect(info, date, week, item) {
      console.log('aaaa', info, date, week, item)
      this.editShow = true
      this.editDate = date
      this.editWeek = week
      this.editDoc = item
      this.editInfo = info
      this.editDateInfo = {
        date: date,
        week: week,
        doc: item
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}

.close-icon {
  position: absolute;
  font-size: 16px;
  right: 0;
  font-weight: bold;
  color: #f44336;
  cursor: pointer;
}
.next-flag {
  position: absolute;
  font-size: 28px;
  right: -16px;
  color: #607d8b;
  &.day {
    color: #ff9800;
    transform: rotate(180deg);
  }
}
>>> .el-card__body {
  padding: 0;
}
.app-container {
  // background-color: #e9eef3;
  height: calc(100vh - 50px);
  padding: 10px;
  .box-card {
    // height: calc(100vh - 100px);
    margin-bottom: 0px;
  }
  .app-main {
    padding: 15px;
    padding-top: 0;
    color: #333;
    text-align: center;
    overflow: auto;
    height: calc(100vh - 100px);
    .info-tag {
      font-size: 14px;
      cursor: pointer;
      background-color: #1b93c4;
      color: #fff;
      border: 1px solid #d9ecff;
      border-radius: 4px;
      // width:108px;
      line-height: 25px;
      margin-bottom: 5px;
      margin: 0 auto;
      .close {
        cursor: pointer;
        color: #a31717;
        font-size: 14px;
        float: right;
      }
      .close:hover {
        color: #f50707;
      }
    }
    .table-time {
      background: #00c0ef !important;
      color: #fff;
    }
    // }
    .top-table-title {
      font-size: 1.5em;
      margin: 0;
      float: left;
      line-height: 60px;
      // height: 0;
    }
    .top-button-group {
      float: right;
      line-height: 60px;
      >>> button.el-button {
        vertical-align: middle;
      }
      button.el-button.el-button--medium {
        padding: 8px 15px;
      }
      button.el-button.el-button--medium.m0 {
        margin: 0px;
      }
      // .el-button--warning {
      //   background-color: #ff7600;
      //   border-color: #ff7600;
      // }
    }
    .el-header {
      color: #333;
      text-align: center;
      line-height: 60px;
      height: 0 !important;
      position: relative;
      // .el-button {
      //   position: absolute;
      //   right: 10px;
      //   top: 14px;
      // }
    }
    .btn-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      margin: 20px 0 0;
      width: 100%;
      background: #fff;
      box-shadow: 1px 0 7px 0 #9e9e9e78;
      padding: 10px 0;
      z-index: 1;
      .add-doc {
        position: absolute;
        left: 10px;
        top: 12px;
      }
    }
    .el-aside {
      color: #333;
      text-align: center;
    }
  }
}

//公共
.text-left {
  text-align: left;
}
.float-right {
  float: right;
}
.m-r-10 {
  margin-right: 10px;
}
.m-r-90 {
  margin-right: 90px;
}
//修改element样式
// .box-card >>> .el-card__header {
//   padding: 5px 10px;
//   text-align: left;
// }
// .box-card >>> .el-card__body {
//   max-height: 200px;
//   overflow-y: scroll;
// }
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.table {
  margin-bottom: 0px;
}
/*********滚动条*********/

.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 1rem;
  background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 20px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 20px rgba(0, 0, 0, 0.1) inset;
  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),
    0 0 20px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  border-radius: 15px;
  background-color: #fff;
}

.scrollbar::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #61a0a8;
}

#tbBox {
  padding-bottom: 20px;
  table {
    // background: #fff;
    table-layout: fixed;
    width: 100%;
    border-left: #e0e0e0 solid 1px;
    border-top: #e0e0e0 solid 1px;
    border-collapse: collapse;
    tr {
      line-height: 40px;
      height: 40px;
      td {
        white-space: normal;
        word-break: break-all;
        max-height: 30px !important;
        // border-bottom: 1px solid #ccc;
        border-right: #e0e0e0 solid 1px;
        border-bottom: #e0e0e0 solid 1px;
        background-color: #ffffff;
        vertical-align: top;
      }
    }
  }
}
.table-title {
  border-right: #e0e0e0 solid 1px;
  // border-bottom: 1px solid #ccc;
}
.rankService {
  overflow: scroll;
  overflow-x: hidden;
  //   height: 440px;

  .support-line {
    color: #f44336;
    position: relative;
  }
}
.maxh {
  max-height: calc(100vh - 350px);
}
//显示取消选择的医生
// .docCancel,
// .numCancel {
//   background: #d8dbdf !important;
//   color: #83868a !important;
// }
.box-card >>> .el-input.el-input--suffix {
  width: 120px;
}

.me-contain {
  padding: 0 10px;
  // width: 100px;
}
.el-checkbox {
  width: 100%;
  margin-right: 0;
  padding: 0 10px;
  &:hover {
    background: #e0f7fa;
  }
}
.box-con-tit {
  text-align: center;
  display: block;
}
.box-con {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow-y: hidden;
  overflow-x: auto;
  color: #303133;
  padding: 5px 0;
  transition: 0.3s;
  margin-top: 5px;
  .dtip {
    font-size: 12px;
    color: #9e9e9e;
  }
}
>>> .el-button-group > .el-button {
  width: 50%;
}
.btn {
  text-align: right;
  margin: 10px 0 0;
}
.add-icon {
  color: #72bde6;
  cursor: pointer;
  display: inline-block;
  width: 100%;
}
.msg {
  .tit {
    font-weight: bold;
    text-align: center;
  }
  .content {
    text-align: left;
    padding: 0 5px;
  }
}
.dialog-box {
  .dialog-footer-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
  }
}
</style>
<style>
.box-table .el-table__cell.gutter {
  background-color: #00c0ef;
  border-bottom: 1px solid #ebeef5;
}
.failNum {
  float: left;
  padding: 10px 2px;
}
</style>
